<template>
  <view class="content">
    <view class="hz">
      <image src="/static/cx/bg.png" mode="widthFix"></image>
    </view>
    <view class="hz2">
      <view class="menus">
        <view @click="menuIndex=index" :class="['menu-item',menuIndex==index?'selected':'']"
              v-for="(item,index) in menus">
          <text>{{ item.name }}</text>
          <image src="/static/cx/xz.png" mode="widthFix" v-if="menuIndex==index"></image>
        </view>
      </view>
      <view class="map">
        <!-- 地图组件 -->
        <map id="map"
             :longitude="location.longitude"
             :latitude="location.latitude"
             :show-location="true"
             scale="30"

             style="width:100%; height:392rpx;"
        >
        </map>
<!--
 :markers="[{
               id:1,
               iconPath:'/static/qs.png',
               longitude:location.longitude,
               latitude:location.latitude,
               width:30,
               height:40,
               title:location.address,
               callout:{
                 content:'111'
               }
             }]"

-->
      </view>
    </view>
    <view class="hz3">
      <view class="info1">
        <view class="flag1"></view>
        <text class="text1">{{ location.address }}</text>
      </view>
      <view  @click="chooseLocation" class="info2">
        <view class="flag2"></view>
        <text style="margin-left: 20rpx;">{{endLocation.address || '你要去哪？'}}</text>
      </view>
      <view v-if="Object.keys(useLocation).length" class="info3">
        <view  class="left">
          <image style="flex-shrink: 0" src="/static/index/addr.png" mode="heightFix"></image>
          <text class="text1">常用地址：{{useLocation.address}}</text>
        </view>
        <view  v-if="false" style="flex-shrink: 0;margin-left: 30rpx" @click="endLocation = useLocation" class="right">
          <image src="/static/index/address.png" mode="heightFix"></image>
          <text class="text1">选择</text>
        </view>
      </view>
      <view @click="hanlderSubmit" class="btn">确认呼叫</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      lat: '',
      lng: '',
      city: '',
      location: {},
      endLocation:{},
      useLocation:{},
      address:{},
      menuId: 1,
      menuIndex: 0,
      menus: [
        {id: 1, name: '打车',value:4},
        {id: 2, name: '城际拼车',value:4},
        {id: 3, name: '顺风车',value:5},
        {id: 4, name: '豪华车',value:6},
      ],
    }
  },
  onShow() {
    this.location = uni.getStorageSync('location')
    this.useLocation = uni.getStorageSync('endLocation') || {}
  },
  onLoad() {
    //获取经纬度和城市
    this.lat = uni.getStorageSync('lat')
    this.lng = uni.getStorageSync('lng')
    this.city = uni.getStorageSync('city')
  },
  methods: {
    timestampToDate(time) {
      const date = new Date(time); // 时间戳单位为秒，所以乘以 1000 转换为毫秒
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需加1
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    async hanlderSubmit() {
      if (!Object.keys(this.endLocation).length) return uni.showToast({
        title: '请选择目的地',
        icon: 'none'
      });
      let data = {
        type_id:1,
        type: this.menus[this.menuIndex].value,
        startaddr: this.location.address,
        // contacts1:this.contacts,
        // mobile1:this.mobile,
        // houseNo1:this.houseNo,
        lat1: this.location.latitude,
        lng1: this.location.longitude,

        endaddr: this.endLocation.address,
        // contacts2:this.contacts,
        // mobile2:this.mobile,
        // houseNo2:this.houseNo,
        yytime:this.timestampToDate(new Date()),
        lat2: this.endLocation.latitude,
        lng2: this.endLocation.longitude,
      }
      if(this.menuIndex===1){
        data.isPc = 1;
        uni.showModal({
          title:'请输入乘坐人数',
          editable:true,
          success:async ({content, confirm}) => {
            await this.$request({
              url: '/d/order/add',
              method: 'POST',
              data: {
                ...data,
                cNum: content
              }
            });
            //提示
            uni.showToast({
              icon: "success",
              title: "呼叫成功"
            })
          }
        })
      }else {
        await this.$request({
          url: '/d/order/add',
          method: 'POST',
          data
        });
        //提示
        uni.showToast({
          icon: "success",
          title: "呼叫成功"
        })
      }


    },
    chooseLocation(){
      uni.chooseLocation({
        success:res=>{
          console.log(res);
          this.endLocation = res;
          uni.setStorageSync('endLocation',res);
        }
      })
    },
    //跳转
    goNext(url){
      uni.navigateTo({
        url:url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.btn{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  height: 97rpx;
  margin-top: 24rpx;
  background: #885FFF;
  border-radius: 16px;
}
.map {
  position: relative;

  .current-address {
    position: absolute;
    background: #FFFFFF;
    padding: 22rpx 20rpx;
    box-shadow: 0rpx 0rpx 11rpx 0rpx rgba(26, 26, 26, 0.35);
    border-radius: 24rpx;
    font-weight: 500;
    font-size: 24rpx;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
    color: #222222;
    display: flex;
    justify-content: center;

    > view {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 100%;
      align-items: center;

      view:first-child {
        width: 5rpx;
        height: 34rpx;
        background: #17B078;
      }

      view:last-child {
        width: 20rpx;
        height: 20rpx;
        background: #17B078;
        border-radius: 50%;
      }
    }
  }

}

.content {
  padding-bottom: 100rpx;

  .hz {
    image {
      width: 100%;
    }
  }

  .hz2 {
    position: relative;
    margin: -100rpx 20rpx 0;
    background-color: #fff;
    border-radius: 40rpx;

    .menus {
      width: 100%;
      height: 90rpx;
      display: flex;
      background-color: #42C08E;
      border-radius: 40rpx 40rpx 0 0;

      .menu-item {
        height: 70rpx;
        padding-top: 20rpx;
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #fff;
        font-size: $uni-font-size-lg;
        color: #fff;
        font-weight: bold;
        line-height: 40rpx;

        image {
          margin-top: 5rpx;
          width: 40rpx;
        }
      }

      .selected {
        background-image: url('/static/sh/bg2.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        color: #000;
      }
    }
  }

  .hz3 {
    position: relative;
    z-index: 3;
    margin: -50rpx 20rpx 0;
    border-radius: 40rpx;
    background-color: #fff;
    padding: 50rpx 30rpx 30rpx;
    border-radius: 40rpx;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);

    .info1 {
      display: flex;
      padding-left: 30rpx;

      .flag1 {
        margin-top: 12rpx;
        width: 15rpx;
        height: 15rpx;
        border-radius: 50%;
        background-color: #04AB62;
      }

      .text1 {
        margin-left: 25rpx;
        line-height: 40rpx;
        color: #04AB62;
        font-weight: 500;
      }
    }

    .info2 {
      margin-top: 30rpx;
      display: flex;
      line-height: 50rpx;
      padding: 25rpx 30rpx;
      background-color: #E7EAED;
      border-radius: 20rpx;

      .flag2 {
        margin-top: 20rpx;
        width: 15rpx;
        height: 15rpx;
        border-radius: 50%;
        background-color: #FF4A44;
      }

      input {
        height: 50rpx;
        margin-left: 20rpx;
      }
    }

    .info3 {
      margin-top: 30rpx;
      display: flex;
      color: #C2C2C2;
      font-weight: 500;
      font-size: $uni-font-size-sm;
      padding: 0 30rpx;

      .left {
        display: flex;

        image {
          height: 30rpx;
        }

        .text1 {
          margin-left: 10rpx;
        }
      }

      .right {
        margin-left: auto;
        display: flex;

        image {
          height: 30rpx;
        }

        .text1 {
          margin-left: 10rpx;
        }
      }
    }
  }
}
</style>
